<template>
  <div>
    <el-tooltip placement="top">
      <div slot="content">多行信息<br />第二行信息</div>
      <i class="el-icon-question"></i>
    </el-tooltip>
    <el-button type="text" @click="open">点击打开 弹框</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    open () {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
      /**显示一个带有输入框的对话框，允许用户输入信息从用户那里获取额外的信息，比如修改密码、填写备注等。 */
      // this.$prompt('请输入邮箱', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
      //   inputErrorMessage: '邮箱格式不正确'
      // }).then(({ value }) => {
      //   this.$message({
      //     type: 'success',
      //     message: '你的邮箱是: ' + value
      //   });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '取消输入'
      //   });
      // });

      /**这是一个更通用的方法，可以用来创建各种类型的对话框。
      特点: 可以自定义对话框的内容和行为，包括按钮数量、按钮文本、图标等。
      常用场景: 当需要高度定制化的对话框时。 */
      // this.$msgbox({
      //   title: '消息',
      //   message: '这是一个消息提示',
      //   showCancelButton: true,//控制是否显示取消按钮
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   // 定义一个回调函数，在对话框关闭之前执行。
      //   beforeClose: (action, instance, done) => {
      //     if (action === 'confirm') {
      //       instance.confirmButtonLoading = true;
      //       instance.confirmButtonText = '执行中...';
      //       setTimeout(() => {
      //         done();//调用 done() 函数，表示可以关闭对话框。
      //         setTimeout(() => {
      //           instance.confirmButtonLoading = false;
      //         }, 300);
      //       }, 3000);
      //     } else {
      //       done();
      //     }
      //   }
      // }).then(action => {
      //   this.$message({
      //     type: 'info',
      //     message: 'action: ' + action
      //   });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消'
      //   });
      // });


      /**$confirm 含有确认、取消两种按钮，选择不同按钮，有不同操作 */
      // this.$confirm('是否关闭弹框?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '操作成功!'
      //   });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消操作'
      //   });
      // });
    }
  }
}
</script>